import type { CheckboxProps } from "antd"
import { Checkbox } from "antd"
import { FC } from "react"

import { IVenueState } from "@/api/report/types"
import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"

const CheckboxGroup = Checkbox.Group

interface VenueSelectProps {
	options: IVenueState[]
	checkedList: string[]
	setCheckedList: (value: string[]) => void
}

export const VenueSelect: FC<VenueSelectProps> = ({ options, checkedList, setCheckedList }) => {
	const { formatMessage } = useLocale()

	const checkAll = options.length === checkedList.length

	const onChange = (list: string[]) => {
		setCheckedList(list)
	}

	const onCheckAllChange: CheckboxProps["onChange"] = (e: any) => {
		setCheckedList(e?.target?.checked ? options.map(g => g.gameCode) : [])
	}

	return (
		<SFormItem name="gameTypeIds" valuePropName="checked">
			<Checkbox onChange={onCheckAllChange} checked={checkAll}>
				{formatMessage({ id: "report.select_all" })}
			</Checkbox>
			<CheckboxGroup
				options={options.map(g => ({ label: g.venueName, value: g.gameCode }))}
				value={checkedList}
				onChange={onChange}
			/>
		</SFormItem>
	)
}
